<template>
  <span style="margin-right: 10px">
    <el-popover placement="bottom" title="" trigger="click" width="40">
      <el-checkbox-group v-model="chkCols" size="mini">
        <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"/>
      </el-checkbox-group>
      <div title="筛选列" slot="reference">
        <el-button v-if="chkCols.length === checkBoxGroup.length" size="mini" icon="el-icon-s-operation" circle/>
        <el-button v-else size="mini" icon="el-icon-s-operation" type="primary" circle/>
      </div>
    </el-popover>
  </span>

</template>

<script>
  export default {
    name: 'table-dynamic-column',
    data () {
      return {
        chkCols: this.checkedColumns
      }
    },
    props: {
      // 不能直接v-model绑定, 使用chkCols变量中转下, 然后监控chkCols
      checkedColumns: {
        type: Array,
        required: true
      },
      checkBoxGroup: {
        type: Array,
        required: true
      }
    },
    watch: {
      chkCols (val) {
        this.$emit('dynamicColumn', val)
      }
    }
  }
</script>
